<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>新建文章</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="i/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="i/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="i/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="i/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <!-- Amaze UI CSS -->
    <link rel="stylesheet" href="//cdn.amazeui.org/amazeui/2.1.0/css/amazeui.min.css">
    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static "artDialog/skins/blue.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "UE/third-party/SyntaxHighlighter/shCoreDefault.css" %}">
    <script type="text/javascript" src="{% static "UE/third-party/SyntaxHighlighter/shCore.js" %}"></script>
    <script type="text/javascript" charset="utf-8" src="{% static "UE/ueditor.config.js" %}"></script>
    <script type="text/javascript" charset="utf-8" src="{% static "UE/ueditor.all.min.js" %}"></script>
    <script type="text/javascript" charset="utf-8" src="{% static "UE/lang/zh-cn/zh-cn.js" %}"></script>
    <script type="text/javascript" charset="utf-8" src="{% static "js/jquery-1.10.2.min.js" %}"></script>
    <script type="text/javascript" charset="utf-8" src="{% static "artDialog/artDialog.js" %}"></script>
    <script type="text/javascript">
        String.prototype.trim = function() {
            return this.replace(/^\s+|\s+$/g, "");
        }

        var dialog;
        function artAlert(content, icon, okFun) {
            dialog = art.dialog({
                    title: '提示',
                    content: content,
                    icon: icon,
                    drag: false,
                    ok: okFun,
                    });
            dialog.show();
        }
        var ue = UE.getEditor('editor', {
            initialFrameHeight: 300,
            autoHeightEnabled: true,   //是否开启自动高度
            elementPathEnabled: false, // 是否启用元素路径
            saveInterval: 60000, // 多少ms自动保存
            enableAutoSave: true, //是否开启自动保存

        });

        function resetForm() {
            document.getElementById("form1").reset();
            ue.setContent("");
        }

        SyntaxHighlighter.all();
        $(document).ready(function(){
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
            });

            $('#form1').submit(function(){
                var title = $("#title").val();
                var content = ue.getPlainTxt();
                var categoryId = $("#category  option:selected").val();
                var tags = $("#tags").val();

                if (title.trim() == "") {
                    artAlert("请输入文章标题", 'warning', function(){});
                } else {
                    if (categoryId == -1) {
                        artAlert("请选择文章分类", 'warning', function(){});
                    } else {
                        if (content == null || content.trim() == "") {
                            artAlert("请输入文章内容", 'warning', function(){});
                        } else {
                            $.ajax({
                                type:"POST",
                                data: {title:title, content:content, categoryId: categoryId, tags: tags},
                                url: "{% url 'add_article' %}",
                                cache: false,
                                dataType: "html",
                                success: function(result, statues, xml){
                                    artAlert(result, 'succeed', function(){resetForm();})
                                },
                                error: function(){
                                    artAlert("新建文章，失败", 'error', function(){});
                                }
                            });
                        }
                    }
                }
                return false;
            });
        });
    </script>
</head>
<body>
<div class="admin-content">
    <div class="admin-content-body">
        <div class="am-cf am-padding" style="padding-bottom: inherit">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">新建文章</strong> / New article</div>
        </div>
        <hr>
        <div class="am-g">
            <div class="am-u-sm-12 ">
                <form id="form1" method="POST" role="form" class="am-text-middle am-form-horizontal">
                    {% csrf_token %}
{#                    <div class="am-form-group am-center">#}
{#                        <label for="doc-select-1">选择分类：</label>#}
{#                        <select id="category">#}
{#                            <option value="-1">--选择分类--</option>#}
{#                            {% for category in categories %}#}
{#                                <option value="{{ category.id }}">{{ category.type }}</option>#}
{#                            {% endfor %}#}
{#                        </select>#}
{#                    </div>#}
{#                    <input type="text" id="id" value="-1" placeholder="" style="display: none">#}
                    <div class="am-form-group">
                        <label class="am-text-center">标题：</label>
                        <select id="category" class="am-active">
                            <option value="-1">--选择文章分类--</option>
                            {% for category in categories %}
                                <option value="{{ category.id }}">{{ category.type }}</option>
                            {% endfor %}
                        </select>
                        <input type="text" class="am-input-sm" style="width: 500px" id="title" placeholder="输入文章标题">
                    </div>
                    <div class="am-form-group">
                        <label for="">内容：</label>
                        <script id="editor" type="text/plain" style="width:auto;"></script>
                    </div>
                    <div class="am-form-group">
                        <label for="">标签：</label>
                        <input type="text" id="tags" placeholder="">
                        <span class="am-text-warning">可为空；用逗号分开，不超过五个。</span>
                    </div>
                    <div class="am-margin-horizontal">
                        <button type="submit" class="am-btn am-btn-sm am-btn-primary">发布</button>
                    </div>
                </form>
            </div>

        </div>
    </div>

</div>

<!--[if lt IE 9]>
<script src="//libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="/js/polyfill/rem.min.js"></script>
<script src="//libs.useso.com/js/respond.js/1.4.2/respond.min.js"></script>
<script src="//cdn.amazeui.org/amazeui/2.1.0/js/amazeui.legacy.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="//libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.amazeui.org/amazeui/2.1.0/js/amazeui.min.js"></script>
<!--<![endif]-->

</body>
</html>